<template>
	<div class="headNav">
		<ul>
			<li v-bind:class="{focus:focus==1}" v-on:click="jump('/')">首页</li>
			<li v-bind:class="{focus:focus==2}" v-on:click="jump('activity')">活动</li>
			<li v-bind:class="{focus:focus==3}" v-on:click="jump('topic')">专题</li>
			<li v-bind:class="{focus:focus==4}" v-on:click="jump('custom')">团体定制</li>
			<li v-bind:class="{focus:focus==5}"><a href="http://blog.udz.com/wordpress/?cat=30" target="_blank">品牌动向</a></li>
		</ul>
	</div>
</template>

<script>
	import router from '../router'
	
	export default{
		components:{
			
		},
		data(){
			return {
				
			}
		},
		props:["focus"],
		methods:{
			jump: function(abc){
				console.log(abc);
				router.push(abc);
			},
		}
	}
</script>

<style lang="less" rel="stylesheet/less">
	.headNav {
		font-family: "微软雅黑";
		width: 100%;
		height: 36px;
		background-color: black;
		ul{
			cursor: pointer;
			display: block;
			width: 1200px;
			margin: 0 auto;
			padding: 0;
			color: white;
			li{
				text-align: center;
				width: 104px;
				list-style: none;
				float: left;
				line-height: 36px;
				&.focus{
					background-color: #fc5454;
				}
				a{
					text-decoration: none;
					color: white;
				}
				
			}
		}
	}
</style>